<%--@elvariable id="webRoot" type="com.doupi.partner.op.interceptor.OpFilter"--%>
<%@ page language="java" pageEncoding="UTF-8" %>
<%@ include file="../../common/tags.jsp" %>

<!DOCTYPE html>
<html>
<head lang="en">
    <%@include file="../../common/assets.jsp" %>
    <link type="text/css" rel="stylesheet" href="${webRoot }/assets/ui/amazeui/tree/amazeui.tree.min.css">
</head>
<body>
<!-- header -->
<%@include file="../../common/header.jsp" %>

<!-- main start -->
<div class="am-cf admin-main">
    <!-- sidebar start -->
    <%@include file="../../common/menu.jsp" %>
    <!-- sidebar end -->

    <!-- content start -->
    <div class="admin-content">

        <div class="am-cf am-padding">
            <div class="am-fl am-cf">
                <strong class="am-text-primary am-text-lg">首页</strong> /
                <small>系统参数管理</small>
            </div>
        </div>

        <div class="am-g">

            <div class="am-u-sm-12 am-u-md-6 am-text-left">
                <a href="${webRoot}/configure/systemConfig/edit/0" class="am-btn am-btn-default">添加</a>
            </div>
            <div class="am-u-sm-12 am-u-md-6">
                <div class="am-form-group" style="float: right; width: 200px; margin-right: 5px;">
                    <div class="am-input-group am-input-group-sm">
                        <input type="text" class="am-form-field" id="searchKey">
                        <span class="am-input-group-btn">
								<button class="am-btn am-btn-default" type="button" onclick="searchSystemConfig();">搜索</button>
							</span>
                    </div>
                </div>


            </div>


            <div class="am-g">
                <div class="am-u-sm-12">
                    <form class="am-form">
                        <table width="100%"
                                class="am-table am-table-striped am-table-bordered am-table-compact am-text-nowrap" id="list_table">
                            <thead>
                            <tr>
                                <th>KEY</th>
                                <th>名称</th>
                                <th>值</th>
                                <th>备注</th>
                                <th>创建时间</th>
                                <th>更新时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </form>
                </div>

            </div>
        </div>
    </div>
    <!-- main end -->

    <!-- foot -->
    <%@include file="../../common/footer.jsp" %>

    <script src="${webRoot}/assets/ui/amazeui/tree/amazeui.tree.min.js"></script>

    <script type="text/html" id="childRowTemplate">
        <tr role="row_child{{-keyPath.replace(/\//g,'_')}}" data-system-config="{{-systemConfig}}">
            <td class="am-text-center am-text-middle before-content-top-inherit">{{-optionStart}} {{=key}} {{-optionEnd}}</td>
            <td class="am-text-center am-text-middle before-content-top-inherit">{{=name}}</td>
            <td class="am-text-center am-text-middle before-content-top-inherit">{{=value}}</td>
            <td class="am-text-center am-text-middle before-content-top-inherit">{{=memo}}</td>
            <td class="am-text-center am-text-middle before-content-top-inherit">{{=createTime}}</td>
            <td class="am-text-center am-text-middle before-content-top-inherit">{{=updateTime}}</td>
            <td class="am-text-center am-text-middle before-content-top-inherit">
                <div class="am-btn-group am-btn-group-xs">
                    <a href="${webRoot}/configure/systemConfig/addSubordinate/{{=key}}"
                            class="am-btn am-btn-default am-btn-xs am-text-secondary">添加下级
                    </a>
                    <button type="button" onclick="deleteSystemConfig('{{=key}}');"
                            class="am-btn am-btn-default am-btn-xs">删除
                    </button>
                    <a href="${webRoot}/configure/systemConfig/edit/{{=key}}"
                            class="am-btn am-btn-default am-btn-xs am-text-secondary">编辑
                    </a>
                </div>
            </td>
        </tr>
    </script>

    <script type="text/javascript">
        var REGION_TABLE;
        var childRowTemplate;
        $(function () {
            childRowTemplate = AMUI.template('childRowTemplate');

            //表格初始化
            REGION_TABLE = initDataTable({
                ajax: '${webRoot}/configure/systemConfig/list',
                paging: false,
                scrollX: true,
                responsive: false,
                dom: "<'am-g am-datatable-hd'<'am-u-sm-6'f>>" + "<'am-g'<'am-u-sm-12'tr>>" + "<'am-g am-datatable-footer'<'am-u-sm-12'i>>",
                columns: [{
                    'data': 'key',
                    'class': 'am-text-left am-text-middle before-content-top-inherit',
                    'width': '60px',
                    'render': function (v) {
                        return '<span class="details-control">' + v + '</span>';
                    }
                }, 'name', 'value', 'memo', 'createTime', 'updateTime', function (v, flag, data) {
                    var html = '<div class="am-btn-group am-btn-group-xs">';

                    html += '<a href="${webRoot}/configure/systemConfig/addSubordinate/' + data.key +
                        '" class="am-btn am-btn-default am-btn-xs am-text-secondary">添加下级</a>';

                    html += '<button type="button" onclick="deleteSystemConfig(\'' + data.key +
                        '\');" class="am-btn am-btn-default am-btn-xs">删除</button>';

                    html += '<a href="${webRoot}/configure/systemConfig/edit/' + data.key +
                        '" class="am-btn am-btn-default am-btn-xs am-text-secondary">编辑</a>';

                    html += '</div>';

                    return html;
                }]
            }, function (data) { //搜索参数JSON数据
                return {
                    parentKey: '0',
                    key: $('#searchKey').val()
                };
            });

            //初始化tree
            REGION_TABLE.on('draw.dt', function () {
                initSystemConfigTree();
                return false;
            });
        });

        //删除
        function deleteSystemConfig(id) {
            layer.confirm('确定要删除权限：' + id + '?', {
                title: '删除确认'
            }, function (index) {
                ajaxRequest({
                    url: '${webRoot}/configure/systemConfig/delete/' + id,
                    method: 'DELETE'
                }, function () {
                    searchSystemConfig();
                });
            });
        }

        //搜索
        function searchSystemConfig() {
            REGION_TABLE.draw();
        }

        //初始化区域tree
        function initSystemConfigTree() {
            $('#list_table tbody').off('click', 'td span.details-control').on('click', 'td span.details-control', function () {
                var tr = $(this).closest('tr');
                var row = REGION_TABLE.row(tr);
                var rowData = row.data() || (row.length == 0 && JSON.parse(tr.data('systemConfig').replace(/'/g, '"')));
                if (tr.hasClass('loaded')) {
                    if (tr.hasClass('shown')) {
                        tr.removeClass('shown');
                        tr.nextAll('tr[role^=row_child' + rowData.keyPath.replace(/\//g, '_') + '_' + rowData.key + ']').each(function () {
                            $(this).attr('css-display', $(this).css('display')).hide();
                        });
                    } else {
                        tr.addClass('shown').nextAll('tr[role=row_child' + rowData.keyPath.replace(/\//g, '_') + '_' + rowData.key + ']').show();
                        tr.addClass('shown').nextAll('tr[role^=row_child' + rowData.keyPath.replace(/\//g, '_') + '_' + rowData.key + ']').each(function () {
                            $(this).css('display', $(this).attr('css-display')).removeAttr('css-display');
                        });
                    }
                    return;
                }

                if (tr.hasClass('shown')) {
                    tr.removeClass('shown').addClass('loaded').nextAll('tr[role^=row_child' + rowData.keyPath.replace(/\//g, '_') + '_' + rowData.key + ']').each(function () {
                        $(this).attr('css-display', $(this).css('display')).hide();
                    });
                } else {
                    ajaxRequest({
                        url: '${webRoot}/configure/systemConfig/list/' + rowData.key,
                        method: 'POST',
                        async: false
                    }, function (data) {
                        var html = '';
                        if (data.statusCode == '0000') {
                            $.each(data.data, function (key, value) {
                                value.optionStart = '<span class="details-control" style="background-position:40px center; padding-left:60px;">';
                                value.optionEnd = '</span>';
                                value.systemConfig = JSON.stringify(value).replace(/"/g, "'");

                                html += childRowTemplate(value);
                            });
                        }
                        if (row.length <= 0) {
                            tr.addClass('shown').after(html);
                        } else {
                            row.child(html).show();
                            tr.addClass('shown').next('tr').replaceWith(html);
                        }
                    }, function () {

                    }, true);

                }
            });
        }
    </script>
</body>
</html>